<template>
    <div class="container">
        <div>
            <!-- 搜索 -->
            <div>
                <el-input v-model="procedureName" style="width: 240px" placeholder="请输入任务名">
                    <template #append>
                        <el-button :icon="Search" @click="cha()" />
                    </template>
                </el-input>
            </div>

            <!-- 表格 -->
            <el-table :data="tableData" :border="true">
                <el-table-column prop="Id" label="Id" width="80"/>
                <el-table-column prop="ProcedureName" label="工序名称"/>
                <el-table-column prop="ApprovalStatusText" label="审批状态"/>
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button v-if="scope.row.ApprovalStatus==1" @click="send(scope.row.Id)" type="primary" size="small"
                            plain>提审</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]" :size="size" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>

        </div>

        <el-dialog v-model="sendVisible" destroy-on-close>
            <Send :id="Id" @onSave="closeSend"/>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { type ComponentSize } from 'element-plus'
    import { Search } from '@element-plus/icons-vue'
    import transferinfoapi from '../../api/transferinfoapi';
    import Send from './Send.vue';

    const Id = ref(0);
    const procedureName = ref("")
    const tableData = ref([]);
    const total = ref(0);
    const pageSize = ref(10);
    const pageIndex = ref(1);

    const size = ref<ComponentSize>('default')
    const background = ref(false)
    const disabled = ref(false)



    const getdata = (procedureName: string = "", PageSize: number = 10, PageIndex: number = 1) => {
        var query = {
            procedureName: procedureName,
            PageSize: PageSize,
            PageIndex: PageIndex
        }
        transferinfoapi.query(query).then((res: any) => {
            tableData.value = res.data
            total.value = res.total;
            console.log(tableData.value);
            
        })
    }

    const cha = () => {
        getdata(procedureName.value);
    }

    const handleSizeChange = (val: number) => {
        pageSize.value = val;
        pageIndex.value = 1;
        getdata(procedureName.value, pageSize.value, pageIndex.value);
    }
    const handleCurrentChange = (val: number) => {
        pageIndex.value = val;
        getdata(procedureName.value, pageSize.value, pageIndex.value);
    }

    // 提审
    const sendVisible = ref(false);
    const send = (id: number) => {
        Id.value = id;
        sendVisible.value = !sendVisible.value;
    }
    const closeSend = ()=>{
        sendVisible.value = !sendVisible.value;
        getdata(procedureName.value, pageSize.value, pageIndex.value);
    }


    getdata(procedureName.value, pageSize.value, pageIndex.value);

</script>

<style scoped>
    .container {
        height: 100%;
    }

    .container>div {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem 0;
    }

    .container>div>:nth-child(2) {
        flex-grow: 1;
    }
</style>